<template>
    <!--左边 echars    右边司机按照评分排行前5 -->
    <div id="main" style="width: 100%;height:100%;"></div>
</template>

<script>
import * as api from '../../utils/api'
    export default {
        name: 'echartPic',
        data() {
            return {
                echartdata: '',
                xdata:[],
                ydata:[],
                xxx:[],
                yyy:''
            }
        },
        created() {
            this.axios({
                url: api.GET_COUNTORDER,
                method: 'get',
                params: {}
            }).then(data => {
                this.echartdata=data.data.data
                this.echartdata.forEach((item)=>{
                   this.xdata.push(item.name) 
                   this.ydata.push(item.value) 
                })
                this.xxx=Object.values(this.xdata)
                this.yyy=Object.values(this.ydata)
                this.drawChart();
            })
        },
        methods: {

            drawChart() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("main"));
                /* 订单数据 */
                var NO2_data = this.yyy
                var date_list = this.xxx
                // 指定图表的配置项和数据
                let option = {
                    backgroundColor: '#708EC4',
                    title: {
                        text: '近几月订单情况',
                        textStyle: {
                            align: 'center',
                            color: '#fff',
                            fontSize: 20,
                        },
                        top: '5%',
                        left: 'center',
                    },
                    legend: {
                        data: ['NO2'],
                        textStyle: {
                            color: '#fff',
                            align: 'right',
                        },
                        x: 'right'
                    },

                    grid: {
                        top: '15%',
                        left: '5%',
                        right: '5%',
                        bottom: '15%',
                        // containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        axisLine: {
                            show: true
                        },
                        splitArea: {
                            color: '#DF8898',
                            lineStyle: {
                                color: '#DF8898'
                            },
                        },
                        axisLabel: {
                            color: '#fff'
                        },
                        splitLine: {
                            show: false
                        },
                        boundaryGap: false,
                        data: date_list,

                    }],

                    yAxis: [{
                        type: 'value',
                        min: 0,
                        splitNumber: 4,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)'
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                            margin: 20,
                            textStyle: {
                                color: '#d1e6eb',

                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    }],
                    series: [{
                        name: 'NO2',
                        type: 'line',
                        showAllSymbol: true,
                        symbol: 'circle',
                        symbolSize: 20,
                        lineStyle: {
                            normal: {
                                color: "#DF8898",
                            },
                        },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#DF8898',
                            }
                        },
                        itemStyle: {
                            color: "#7B7FA2",
                            borderColor: "#fff",
                            borderWidth: 3,
                            shadowColor: '#7B7FA2',
                            shadowBlur: 0,
                            shadowOffsetY: 2,
                            shadowOffsetX: 2,
                        },
                        tooltip: {
                            show: false
                        },
                        data: NO2_data
                    }, ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        },
        // mounted() {
        //     this.drawChart();
        // }
    }
</script>